<template>
    <div class="app-container">
        <el-row>
            <el-col :span="20">
                <div class="grid-content bg-purple">
                    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
                        <el-form-item label="中文表名">
                            <el-input v-model="listQuery.table_comment" placeholder="中文表名" autosize />
                        </el-form-item>
                        <el-form-item label="英文表名">
                            <el-input v-model="listQuery.table_name" placeholder="英文表名" autosize />
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">
                    <el-button type="text" @click="fetchData()">查询</el-button>
                    <!-- <el-button type="primary" @click="dialogFormVisible = true">新增</el-button> -->
                </div>
            </el-col>
        </el-row>
        <div style="min-height: 0;">
            <el-table v-loading="listLoading" :data="list" border fit highlight-current-row :row-style="{height: '20px'}">
            <el-table-column align="center" v-for="item in columns" :key="item.id" :label="item.label" style="height: 20px;">
                <template slot-scope="{row}">
                    <span>{{ row[item.prop] }}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        </div>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="fetchData" />
    </div>
</template>

<script>
import { getTableList } from '@/api/metadata'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import tableList from '@/components/TableList'

export default {
    name: 'MetadataTable',
    components: { Pagination, tableList },
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: 'success',
                draft: 'info',
                deleted: 'danger'
            }
            return statusMap[status]
        }
    },
    data() {
        return {
            list: null,
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 20,
                table_comment: '',
                table_name: ''
            },
            columns: [
                { id: 1, prop: 'id', label: 'ID' },
                { id: 2, prop: 'schema_type', label: '库类型' },
                { id: 3, prop: 'table_schema', label: '数据库' },
                { id: 4, prop: 'table_name', label: '表名称' },
                { id: 5, prop: 'table_comment', label: '表备注' },
                { id: 6, prop: 'src_schema_type', label: '源库类型' },
                { id: 7, prop: 'src_table_schema', label: '源数据库' },
                { id: 8, prop: 'src_table_name', label: '源表名称' },
                { id: 9, prop: 'src_table_comment', label: '源表备注' },
                { id: 10, prop: 'create_user_name', label: '创建人' }
            ]
        }
    },
    mounted() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            this.listLoading = true
            getTableList(this.listQuery).then(response => {
                this.list = response.data.data
                this.total = response.data.total
                this.listLoading = false
            })
        },
        handleDetail(item) {
            this.$router.push({ path: '/metadata/table/detail/' + item.id, query: { name: item.table_name } })
        }
    }
}
</script>

<style scoped>
.edit-input {
    padding-right: 100px;
}

.cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
}
</style>@/api/metadata